<template>
  <div class="water-mark">
    <div class="water-mark__item" v-for="(item, index) in length" :key="index">
      <span>{{userInfo.org_name}}</span>
      <span>{{userInfo.nick_name}}</span>
      <span>{{currentDate}}</span>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'WaterMark',
      props: ['length'],
      data() {
        return {
          currentDate: '',
          userInfo: this.$store.state.userInfo,
        }
      },
      methods:{
        //获得今天日期
        getCurrentDate() {
          let date = new Date()
          let year = date.getFullYear()
          let month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
          let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
          this.currentDate = year + '' + month + '' + day
        },
      },
      created() {
        this.getCurrentDate()
      },
    }
</script>

<style lang="scss" scoped>
  .water-mark {
    position: absolute;
    top: 0;
    padding-top: 220px;
    left: 0;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    bottom: 0;
    color: rgba(0, 0, 0, .1);
    
    &__item {
      display: flex;
      font-size: 18px;
      margin-bottom: 180px;
      transform: rotate(-30deg);
      
      span {
        display: block;
        flex: none;
        
        &:nth-child(2) {
          flex: 1;
          text-align: center;
        }
        
        &:nth-child(3) {
          width: 5em;
          text-align: right;
        }
      }
    }
  }
</style>
